<script setup>
import {  reactive, ref } from 'vue';
import { useListAsync } from '../../../swy-hook/getList.js'
import addForm from './addForm.vue';
import { useSeekState, useSeekType } from '../../../swy-hook/index.js'
import { getcommunityApi,delnoticeApi } from '../../../api/notice'
import { ElMessage } from "element-plus";

const stateList = useSeekState(true);
const typeList = useSeekType(true);
const addRef = ref()
const baseImgUrl = 'http://124.223.14.236:8881'
const communityList = ref([])
const { getList, list, count } = useListAsync()
const queryData = reactive({
  pageSize: 3,
  current: 1,
  community_code: '',
  title: '',
  status: '',
  type: '',
})

// 获取小区信息列表
const initData = async () => {
  let { data } = await getcommunityApi()
  // console.log(data);
  communityList.value = data
}
onMounted(() => {
  getList('content/notice', queryData)
  initData()
});
// console.log(list);
// 显示状态文字
const showState = (val) => {
  let res = stateList.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};
// 显示类型文字
const showState2 = (val) => {
  let res = typeList.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};
// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  getList('content/notice', queryData)
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  getList('content/notice', queryData)
};
// 搜索确定
const onSearch = () => {
  queryData.current = 1;
  getList('content/notice', queryData)
};
// 搜索取消
const onReset = () => {
  Object.assign(queryData, {
    pageSize: 3,
    current: 1,
    community_code: '',
    title: '',
    status: '',
    type: '',
  });
  getList('content/notice', queryData)
};
// --------------------------------修改功能------
const editRow = (id) => {
  addRef.value.replyData(id);
  getList('/content/notice', queryData)
};
// --------------------------------删除功能------
const  delRow = async (id)=>{
    await delnoticeApi(id)
    ElMessage.success('删除成功')
    if(queryData.current > 1 && list.value.length === 1) queryData.current--
    getList('/content/notice', queryData)
}
</script>

<template>
  <div class="app-container">
  <div style="margin-bottom: 10px;">
    <b style="margin-right: 10px; font-size: large;">通知公告</b>
    <span>用于管理各小区的通知公告、公共的通告公告</span>
  </div>
    <el-card >
      <!-- 搜索区域 -->
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">

        <el-col :span="4">
          <el-form-item label="小区名称">
            <el-select placeholder="请输入" v-model="queryData.community_code" clearable>
              <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="标题">
            <el-input placeholder="请输入" v-model="queryData.title">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="类型">
            <el-select placeholder="请输入" v-model="queryData.type" clearable>
              <el-option v-for="(item, index) in typeList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select placeholder="请输入" v-model="queryData.status" clearable>
              <el-option v-for="(item, index) in stateList" :key="index" :label="item.label"
                :value="item.value"></el-option>

            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item style="padding-top: 30px;">
            <!-- <template> -->
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
            <!-- </template> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <el-card style="margin-top: 15px;">
    <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.drawer = true">新增通知</el-button>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="ID"></el-table-column>
        <el-table-column label="小区名称">
          <template #default="{ row }">
            {{ row.community?.name }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="pic_url" label="封面图">
          <template #default="{ row }">
            <div class="demo-image__preview">
                <el-image style="width: 100px; height: 100px" :src="`http://124.223.14.236:8881${row.pic_url}`"
                  :zoom-rate="1.2" :preview-src-list="[`http://124.223.14.236:8881${row.pic_url}`]" :initial-index="99"
                  :z-index="99" fit="cover" :preview-teleported="true" />
              </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template #default="{ row }">
            {{ showState2(row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            {{ showState(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="权重"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="success">编辑</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination style="float: right;" @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
        v-model:page-size="queryData.pageSize" layout="total, prev, pager, next" :total="count" background>
      </el-pagination>
      <br>
      <br>
      <!-- 新增修改组件 -->
      <addForm ref="addRef" @updateList="getList('content/notice', queryData)" />
    </el-card>
  </div>
  <!-- 底部区域 -->
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>

<style scoped>
img {
  max-width: 100px;
  max-height: 100px;
}
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>

